<template>
    <div class="onboarding-management-page">
        <!-- 頁面標題 -->
        <page-title :title="'入職管理'" />

        <!-- Tab 切換 -->
        <div class="tab-section">
            <el-tabs v-model="activeTab" @tab-click="handleTabChange">
                <el-tab-pane label="待入職" name="pending"></el-tab-pane>
                <el-tab-pane label="已入職" name="completed"></el-tab-pane>
                <el-tab-pane label="已放棄" name="abandoned"></el-tab-pane>
            </el-tabs>
        </div>

        <!-- 篩選條件區域 -->
        <div class="filter-section">
            <el-form :model="filterForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="入職部門">
                            <el-select v-model="filterForm.department" placeholder="請選擇部門" clearable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="入職職位">
                            <el-select v-model="filterForm.position" placeholder="請選擇職位" clearable>
                                <el-option v-for="item in positionOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="入職等級">
                            <el-select v-model="filterForm.level" placeholder="請選擇等級" clearable>
                                <el-option v-for="item in levelOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="員工類型">
                            <el-select v-model="filterForm.employeeType" placeholder="請選擇類型" clearable>
                                <el-option v-for="item in employeeTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="員工來源">
                            <el-select v-model="filterForm.source" placeholder="請選擇來源" clearable>
                                <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="預計入職日期">
                            <el-date-picker v-model="filterForm.expectedDateRange" type="daterange" range-separator="至"
                                start-placeholder="開始日期" end-placeholder="結束日期" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="關鍵字搜索">
                            <el-input v-model="filterForm.keyword" placeholder="請輸入員工姓名/手機號碼" clearable
                                @clear="handleSearch" @keyup.enter="handleSearch">
                                <template #append>
                                    <el-button type="primary" @click="handleSearch">
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 操作按鈕區域 -->
        <div class="action-section">
            <template v-if="activeTab === 'pending'">
                <el-button type="primary" @click="addEmployee">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>新增</span>
                </el-button>
                <el-button type="success" @click="importEmployees">
                    <el-icon>
                        <Upload />
                    </el-icon>
                    <span>導入</span>
                </el-button>
                <el-button type="warning" @click="exportEmployees">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>導出</span>
                </el-button>
                <el-button type="info" @click="showMoreActions">
                    <el-icon>
                        <More />
                    </el-icon>
                    <span>更多操作</span>
                </el-button>
            </template>

            <template v-else-if="activeTab === 'completed'">
                <el-button type="warning" @click="exportEmployees">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>導出</span>
                </el-button>
                <el-button type="info" @click="showMoreActions">
                    <el-icon>
                        <More />
                    </el-icon>
                    <span>更多操作</span>
                </el-button>
            </template>

            <template v-else-if="activeTab === 'abandoned'">
                <el-button type="warning" @click="exportEmployees">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>導出</span>
                </el-button>
                <el-button type="danger" @click="batchDelete" :disabled="selectedRecords.length === 0">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    <span>批量刪除</span>
                </el-button>
            </template>
        </div>

        <!-- 表格區域 -->
        <div class="table-section">
            <!-- 待入職表格 -->
            <el-table v-if="activeTab === 'pending'" :data="pendingList" style="width: 100%" v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="department" label="入職部門" width="150" />
                <el-table-column prop="position" label="入職職位" width="150" />
                <el-table-column prop="phone" label="手機號碼" width="150" />
                <el-table-column prop="onboardingStatus" label="入職登記狀態" width="150">
                    <template #default="{ row }">
                        <el-tag :type="row.onboardingStatus === '已發送' ? 'success' : 'warning'">
                            {{ row.onboardingStatus }}
                        </el-tag>
                        <el-button v-if="row.onboardingStatus === '未發送'" type="text" size="small"
                            @click="sendOnboarding(row)">
                            發送
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="expectedDate" label="預計入職日期" width="150" />
                <el-table-column prop="approvalStatus" label="入職審批" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getApprovalTagType(row.approvalStatus)">
                            {{ row.approvalStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="source" label="來源" width="120" />
                <el-table-column prop="creator" label="添加人" width="120" />
                <el-table-column prop="createTime" label="添加時間" width="180" />
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="confirmOnboarding(row)">確認入職</el-button>
                        <el-button type="danger" size="small" @click="deleteRecord(row.id)">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 已入職表格 -->
            <el-table v-else-if="activeTab === 'completed'" :data="completedList" style="width: 100%"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="編號" width="120" />
                <el-table-column prop="department" label="入職部門" width="150" />
                <el-table-column prop="position" label="入職職位" width="150" />
                <el-table-column prop="phone" label="手機號碼" width="150" />
                <el-table-column prop="employeeStatus" label="員工狀態" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.employeeStatus === '在職' ? 'success' : 'info'">
                            {{ row.employeeStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="onboardingStatus" label="入職登記狀態" width="150">
                    <template #default="{ row }">
                        <el-tag :type="row.onboardingStatus === '已發送' ? 'success' : 'warning'">
                            {{ row.onboardingStatus }}
                        </el-tag>
                        <el-button v-if="row.onboardingStatus === '未發送'" type="text" size="small"
                            @click="sendOnboarding(row)">
                            發送
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="actualDate" label="實際入職日期" width="150" />
                <el-table-column prop="source" label="來源" width="120" />
                <el-table-column prop="creator" label="添加人" width="120" />
                <el-table-column prop="createTime" label="添加時間" width="180" />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="danger" size="small" @click="deleteRecord(row.id)">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 已放棄表格 -->
            <el-table v-else-if="activeTab === 'abandoned'" :data="abandonedList" style="width: 100%"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="department" label="入職部門" width="150" />
                <el-table-column prop="position" label="入職職位" width="150" />
                <el-table-column prop="phone" label="手機號碼" width="150" />
                <el-table-column prop="expectedDate" label="原定入職日期" width="150" />
                <el-table-column prop="abandonTime" label="放棄時間" width="180" />
                <el-table-column prop="reason" label="放棄原因" width="180" />
                <el-table-column prop="remark" label="備註" width="180" show-overflow-tooltip />
                <el-table-column prop="source" label="來源" width="120" />
                <el-table-column prop="creator" label="添加人" width="120" />
                <el-table-column prop="createTime" label="添加時間" width="180" />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="danger" size="small" @click="deleteRecord(row.id)">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分頁 -->
            <div class="pagination-section">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

        <!-- 新增員工對話框 -->
        <el-dialog v-model="addDialogVisible" title="新增員工" width="700px">
            <!-- 新增員工表單內容 -->
            <el-form :model="newEmployeeForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="員工姓名" required>
                            <el-input v-model="newEmployeeForm.name" placeholder="請輸入員工姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手機號碼" required>
                            <el-input v-model="newEmployeeForm.phone" placeholder="請輸入手機號碼" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="入職部門" required>
                            <el-select v-model="newEmployeeForm.department" placeholder="請選擇部門" style="width: 100%">
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="入職職位" required>
                            <el-select v-model="newEmployeeForm.position" placeholder="請選擇職位" style="width: 100%">
                                <el-option v-for="item in positionOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="入職等級">
                            <el-select v-model="newEmployeeForm.level" placeholder="請選擇等級" style="width: 100%">
                                <el-option v-for="item in levelOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="員工類型">
                            <el-select v-model="newEmployeeForm.employeeType" placeholder="請選擇類型" style="width: 100%">
                                <el-option v-for="item in employeeTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="預計入職日期" required>
                            <el-date-picker v-model="newEmployeeForm.expectedDate" type="date" placeholder="請選擇日期"
                                style="width: 100%" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="員工來源">
                            <el-select v-model="newEmployeeForm.source" placeholder="請選擇來源" style="width: 100%">
                                <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="備註">
                    <el-input v-model="newEmployeeForm.remark" type="textarea" :rows="3" placeholder="請輸入備註信息" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitNewEmployee">確定</el-button>
            </template>
        </el-dialog>

        <!-- 更多操作下拉菜單 -->
        <el-dropdown ref="moreActionsDropdown" trigger="click" :hide-on-click="false">
            <div style="display: none;"></div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="batchSendOnboarding">批量發送入職登記</el-dropdown-item>
                    <el-dropdown-item @click="batchConfirmOnboarding">批量確認入職</el-dropdown-item>
                    <el-dropdown-item @click="batchMarkAsAbandoned">批量標記為已放棄</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Plus, Upload, Download, Delete, More } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// Tab 切換
const activeTab = ref('pending')

// 篩選表單
const filterForm = reactive({
    department: '',
    position: '',
    level: '',
    employeeType: '',
    source: '',
    expectedDateRange: [],
    keyword: ''
})

// 下拉選項
const departmentOptions = [
    { value: 'rd', label: '研發部' },
    { value: 'hr', label: '人事部' },
    { value: 'finance', label: '財務部' },
    { value: 'marketing', label: '市場部' },
    { value: 'sales', label: '銷售部' }
]

const positionOptions = [
    { value: 'frontend', label: '前端開發' },
    { value: 'backend', label: '後端開發' },
    { value: 'designer', label: '設計師' },
    { value: 'product', label: '產品經理' },
    { value: 'hr', label: '人事專員' }
]

const levelOptions = [
    { value: 'p1', label: 'P1' },
    { value: 'p2', label: 'P2' },
    { value: 'p3', label: 'P3' },
    { value: 'm1', label: 'M1' },
    { value: 'm2', label: 'M2' }
]

const employeeTypeOptions = [
    { value: 'fulltime', label: '全職' },
    { value: 'parttime', label: '兼職' },
    { value: 'intern', label: '實習生' },
    { value: 'contract', label: '合同工' }
]

const sourceOptions = [
    { value: 'recruitment', label: '招聘網站' },
    { value: 'recommend', label: '內部推薦' },
    { value: 'headhunting', label: '獵頭推薦' },
    { value: 'campus', label: '校園招聘' },
    { value: 'other', label: '其他' }
]

// 表格數據
const loading = ref(false)
const pendingList = ref([
    {
        id: 1,
        name: '張三',
        department: '研發部',
        position: '前端開發',
        phone: '13800138001',
        onboardingStatus: '未發送',
        expectedDate: '2023-06-15',
        approvalStatus: '已通過',
        source: '招聘網站',
        creator: '李四',
        createTime: '2023-05-10 14:30'
    },
    {
        id: 2,
        name: '王五',
        department: '人事部',
        position: '人事專員',
        phone: '13800138002',
        onboardingStatus: '已發送',
        expectedDate: '2023-06-20',
        approvalStatus: '審核中',
        source: '內部推薦',
        creator: '李四',
        createTime: '2023-05-12 10:15'
    }
])

const completedList = ref([
    {
        id: 3,
        name: '趙六',
        employeeId: '10001',
        department: '研發部',
        position: '後端開發',
        phone: '13800138003',
        employeeStatus: '在職',
        onboardingStatus: '已發送',
        actualDate: '2023-05-05',
        source: '獵頭推薦',
        creator: '李四',
        createTime: '2023-04-20 09:00'
    }
])

const abandonedList = ref([
    {
        id: 4,
        name: '錢七',
        department: '市場部',
        position: '市場專員',
        phone: '13800138004',
        expectedDate: '2023-05-25',
        abandonTime: '2023-05-20 16:45',
        reason: '個人原因',
        remark: '已找到其他工作',
        source: '校園招聘',
        creator: '李四',
        createTime: '2023-04-25 11:20'
    }
])

// 分頁
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 10
})

// 多選
const selectedRecords = ref([])

// 新增員工對話框
const addDialogVisible = ref(false)
const newEmployeeForm = reactive({
    name: '',
    phone: '',
    department: '',
    position: '',
    level: '',
    employeeType: '',
    expectedDate: '',
    source: '',
    remark: ''
})

// 更多操作下拉菜單
const moreActionsDropdown = ref(null)

// 方法
const handleTabChange = () => {
    selectedRecords.value = []
    handleSearch()
}

const handleSearch = () => {
    loading.value = true
    // 模擬API請求
    setTimeout(() => {
        loading.value = false
    }, 500)
}

const addEmployee = () => {
    addDialogVisible.value = true
}

const submitNewEmployee = () => {
    // 驗證表單
    if (!newEmployeeForm.name || !newEmployeeForm.phone || !newEmployeeForm.department ||
        !newEmployeeForm.position || !newEmployeeForm.expectedDate) {
        ElMessage.warning('請填寫完整信息')
        return
    }

    // 模擬新增員工
    const newId = Math.max(
        ...pendingList.value.map(r => r.id),
        ...completedList.value.map(r => r.id),
        ...abandonedList.value.map(r => r.id)
    ) + 1

    const newEmployee = {
        id: newId,
        name: newEmployeeForm.name,
        department: newEmployeeForm.department,
        position: newEmployeeForm.position,
        phone: newEmployeeForm.phone,
        onboardingStatus: '未發送',
        expectedDate: newEmployeeForm.expectedDate,
        approvalStatus: '待審核',
        source: newEmployeeForm.source || '其他',
        creator: '當前用戶',
        createTime: new Date().toLocaleString()
    }

    pendingList.value.unshift(newEmployee)
    ElMessage.success('新增成功')
    addDialogVisible.value = false

    // 重置表單
    Object.keys(newEmployeeForm).forEach(key => {
        newEmployeeForm[key] = ''
    })
}

const importEmployees = () => {
    ElMessage.info('導入功能待實現')
}

const exportEmployees = () => {
    ElMessage.info('導出功能待實現')
}

const showMoreActions = () => {
    moreActionsDropdown.value.handleClick()
}

const batchDelete = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    ElMessageBox.confirm(
        `確定要刪除選中的 ${selectedRecords.value.length} 條記錄嗎？`,
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 根據當前Tab刪除對應的數據
        const ids = selectedRecords.value.map(item => item.id)
        if (activeTab.value === 'pending') {
            pendingList.value = pendingList.value.filter(item => !ids.includes(item.id))
        } else if (activeTab.value === 'completed') {
            completedList.value = completedList.value.filter(item => !ids.includes(item.id))
        } else if (activeTab.value === 'abandoned') {
            abandonedList.value = abandonedList.value.filter(item => !ids.includes(item.id))
        }
        ElMessage.success('刪除成功')
        selectedRecords.value = []
    }).catch(() => {
        ElMessage.info('已取消刪除')
    })
}

const deleteRecord = (id) => {
    ElMessageBox.confirm(
        '確定要刪除這條記錄嗎？',
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 根據當前Tab刪除對應的數據
        if (activeTab.value === 'pending') {
            pendingList.value = pendingList.value.filter(item => item.id !== id)
        } else if (activeTab.value === 'completed') {
            completedList.value = completedList.value.filter(item => item.id !== id)
        } else if (activeTab.value === 'abandoned') {
            abandonedList.value = abandonedList.value.filter(item => item.id !== id)
        }
        ElMessage.success('刪除成功')
    }).catch(() => {
        ElMessage.info('已取消刪除')
    })
}

const sendOnboarding = (record) => {
    ElMessageBox.confirm(
        '確定要發送入職登記信息嗎？',
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        record.onboardingStatus = '已發送'
        ElMessage.success('發送成功')
    }).catch(() => {
        ElMessage.info('已取消發送')
    })
}

const confirmOnboarding = (record) => {
    ElMessageBox.confirm(
        '確定該員工已入職嗎？',
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 從待入職列表移除
        pendingList.value = pendingList.value.filter(item => item.id !== record.id)

        // 添加到已入職列表
        const newEmployee = {
            ...record,
            employeeId: '1000' + Math.floor(Math.random() * 1000),
            employeeStatus: '在職',
            actualDate: new Date().toISOString().split('T')[0]
        }
        completedList.value.unshift(newEmployee)

        ElMessage.success('操作成功')
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const batchSendOnboarding = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    ElMessageBox.confirm(
        `確定要批量發送 ${selectedRecords.value.length} 條入職登記信息嗎？`,
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        const ids = selectedRecords.value.map(item => item.id)
        pendingList.value.forEach(item => {
            if (ids.includes(item.id) && item.onboardingStatus === '未發送') {
                item.onboardingStatus = '已發送'
            }
        })
        ElMessage.success('批量發送成功')
    }).catch(() => {
        ElMessage.info('已取消批量發送')
    })
}

const batchConfirmOnboarding = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    ElMessageBox.confirm(
        `確定要批量確認 ${selectedRecords.value.length} 條入職記錄嗎？`,
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        const ids = selectedRecords.value.map(item => item.id)
        const toBeMoved = pendingList.value.filter(item => ids.includes(item.id))

        // 添加到已入職列表
        toBeMoved.forEach(record => {
            const newEmployee = {
                ...record,
                employeeId: '1000' + Math.floor(Math.random() * 1000),
                employeeStatus: '在職',
                actualDate: new Date().toISOString().split('T')[0]
            }
            completedList.value.unshift(newEmployee)
        })

        // 從待入職列表移除
        pendingList.value = pendingList.value.filter(item => !ids.includes(item.id))

        ElMessage.success(`已成功確認 ${toBeMoved.length} 條入職記錄`)
        selectedRecords.value = []
    }).catch(() => {
        ElMessage.info('已取消批量確認')
    })
}

const batchMarkAsAbandoned = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    ElMessageBox.prompt('請輸入放棄原因', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        inputPlaceholder: '請輸入放棄原因',
        inputValidator: (value) => {
            if (!value) {
                return '放棄原因不能為空'
            }
            return true
        }
    }).then(({ value }) => {
        const ids = selectedRecords.value.map(item => item.id)
        const toBeMoved = pendingList.value.filter(item => ids.includes(item.id))

        // 添加到已放棄列表
        toBeMoved.forEach(record => {
            const abandonedRecord = {
                ...record,
                abandonTime: new Date().toLocaleString(),
                reason: value,
                remark: '批量標記為已放棄'
            }
            abandonedList.value.unshift(abandonedRecord)
        })

        // 從待入職列表移除
        pendingList.value = pendingList.value.filter(item => !ids.includes(item.id))

        ElMessage.success(`已成功標記 ${toBeMoved.length} 條記錄為已放棄`)
        selectedRecords.value = []
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const handleSelectionChange = (selection) => {
    selectedRecords.value = selection
}

const handleSizeChange = (val) => {
    pagination.pageSize = val
    handleSearch()
}

const handleCurrentChange = (val) => {
    pagination.currentPage = val
    handleSearch()
}

const getApprovalTagType = (status) => {
    switch (status) {
        case '已通過': return 'success'
        case '審核中': return 'warning'
        case '未通過': return 'danger'
        default: return 'info'
    }
}
</script>

<style lang="less" scoped>
.onboarding-management-page {
    padding: 20px;
    background-color: #fff;

    .tab-section {
        margin-bottom: 16px;

        :deep(.el-tabs__header) {
            margin-bottom: 0;
        }
    }

    .filter-section {
        padding: 16px;
        margin-bottom: 16px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .action-section {
        margin-bottom: 16px;
        display: flex;
        gap: 12px;
    }

    .table-section {
        background-color: #fff;
        padding: 16px;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

        .pagination-section {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>